<template>
  <div class="subjects">
    <div class="subject" v-for="content in ContentList" :key="content.cno">
      <div
          class="item"
          :style="{ backgroundImage: 'url(' + content.photo + ')' }"
          @click="showScoreDialog(content)">
        <div class="content">
          <div class="tit">{{ content.cno }}</div>
          <div class="sub">{{ content.cname }}</div>
          <div class="time">{{ content.name }}</div>
        </div>
      </div>
    </div>

    <!-- 成绩弹窗 -->
    <el-dialog :title="selectedCourse.cname" v-model="dialogVisible" width="30%" custom-class="score-dialog" @close="dialogVisible = false">
      <el-table :data="selectedScores" :header-cell-style="{ background: '#f6f9fa'}">
        <el-table-column prop="cno" label="课程号"></el-table-column>
        <el-table-column prop="score" label="成绩"></el-table-column>
        <el-table-column prop="attendance" label="出勤率"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.query.id;
const ContentList = ref([]);
const selectedCourse = ref({});
const selectedScores = ref([]);
const dialogVisible = ref(false);

onMounted(() => {
  getData();
});

const getData = async () => {
  try {
    const response = await axios.get('http://localhost:8080/getMySC', {
      params: {
        id: id
      }
    });
    ContentList.value = response.data;
  } catch (error) {
    console.error(error);
  }
};

// 显示成绩弹窗
const showScoreDialog = (course) => {
  // 根据课程编号找到对应的成绩记录
  const courseScores = ContentList.value.filter(item => item.cno === course.cno);
  selectedCourse.value = course;
  selectedScores.value = courseScores;
  dialogVisible.value = true;
};
</script>
<style>
.subjects {
  display: grid;
  gap: 1rem; /* 添加项目之间的间距 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  width: 100%;
}

.subject {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: transform 0.2s; /* 添加悬停动画 */
}

.subject:hover {
  transform: scale(1.05); /* 悬停时放大 */
}

.item {
  position: relative;
  width: 300px; /* 设置固定的宽度 */
  height: 170px; /* 设置固定的高度 */
  border-radius: 10px; /* 设置为圆角矩形 */
  overflow: hidden;
  cursor: pointer;
  background-position: center;
  background-size: cover;
}

.content {
  padding: 1rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* 背景颜色 */
  backdrop-filter: blur(10px); /* 添加模糊效果 */
}

.score-dialog {
  border-radius: 10px; /* 对话框圆角 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); /* 对话框阴影 */
}

/* 移除默认关闭按钮样式 */
.score-dialog .el-dialog__headerbtn {
  display: none;
}
</style>